/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../../styles' as styles;
@use '../../styles/tokens' as awsui;
@use './motion';
@use '../../generated/custom-css-properties/index' as custom-props;

.root {
  @include styles.styles-reset;
  position: relative;
  white-space: inherit;

  &.interior {
    position: static;
  }
}

.dropdown {
  position: absolute;
  display: none;
  // Needs to be higher than a global navigation element
  z-index: 2000;
  transform-origin: top;

  // When used in portal we need z-index to be higher than modal's
  &.use-portal {
    z-index: 7000;
  }

  &:not(.interior) {
    transform: translateY(0px);
    @include styles.with-motion {
      transition: transform awsui.$motion-duration-show-quick;
    }
  }

  &-content-wrapper {
    position: relative;
    background-color: awsui.$color-background-dropdown-item-default;
    outline: none;
    @include styles.dropdown-shadow;

    // Don't show dropdown border when there's no dropdown content
    &.is-empty::after {
      display: none;
    }
  }

  > .dropdown-content-wrapper {
    border-block-start: awsui.$border-divider-list-width solid awsui.$color-border-container-top;
    border-block-end: awsui.$border-divider-list-width solid awsui.$color-border-dropdown-group;
  }

  &-drop-up {
    > .dropdown-content-wrapper {
      transform-origin: bottom;
      box-shadow: awsui.$shadow-dropup;
    }

    &.with-limited-width > .dropdown-content-wrapper {
      border-block-start: none;
    }
  }
  &-drop-left {
    inset-inline-end: 0;
  }
  &-drop-right {
    inset-inline-start: 0;
  }
  &.occupy-entire-width {
    min-inline-size: 100%;
  }
  &.stretch-beyond-trigger-width {
    inline-size: max-content;
    max-inline-size: var(#{custom-props.$dropdownDefaultMaxWidth}, 100%);
  }
  &.interior > .dropdown-content-wrapper {
    margin-block-start: -1px;
  }
  &.hide-block-border > .dropdown-content-wrapper {
    border-block-start: none;
  }
  &.hide-block-border:not(.dropdown-drop-up) > .dropdown-content-wrapper {
    border-block-end: none;
  }
  &.hide-block-border.refresh > .dropdown-content-wrapper {
    border-block-end: none;
  }
  &.open {
    display: block;

    &:not(.interior).refresh[data-animating='true'] {
      transform: translateY(4px);

      &.dropdown-drop-up {
        transform: translateY(-4px);
      }
    }
    &.nowrap {
      white-space: nowrap;
      // Taking into account width of scroll element
      overflow: scroll;
    }
  }
}

.dropdown-content {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
}

.stretch-trigger-height {
  block-size: 100%;
}
